<template>
  <div>
    <van-cell @click="showPopup"
      ><span>{{ title }}</span
      ><span>{{textlabel ? textlabel : '请选择'}}<van-icon name="arrow" /></span
    ></van-cell>
    <van-popup v-model="show" position="bottom">
      <van-picker
        :value-key="'label'"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        ref="picker"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      require: true,
    },
    columns: {
      type: Array,
      require: true,
    },
  },
  data() {
    return {
      show: false,
      textlabel:null,
    }
  },

  methods: {
    showPopup() {
      this.show = true
    },
    onConfirm() {
      this.textlabel = this.$refs.picker.getValues()[0].label
      this.$emit('onConfirm',this.title,this.$refs.picker.getValues()[0].value,this.$refs.picker.getValues()[0].label)
      this.show = false
    },
    onCancel() {
      console.log('取消')
      this.show = false
    },
  },
}
</script>

<style scoped lang="scss">
::v-deep(.van-picker__toolbar) {
  height: 50px;
  color: #000;
}
.van-picker {
  height: 264px !important;
}
.van-picker__columns {
  position: absolute;
  top: 0px;
  left: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.van-cell {
  width: 100vw;
  padding: 0 20px 0 0;
  line-height: 44px;
}
.van-cell__value {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: #888;
}
</style>
